<template>
  <div id="LoginLogs">
    <!-- 右侧卡片区域 -->
    <!-- 用户列表卡片区 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="loginLogVO" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input @keyup.enter.native="search" clearable="" @clear="search" v-model="loginLogVO.username"
                    placeholder="请输入用户名查询"></el-input>
        </el-form-item>
        <el-form-item label="IP地址">
          <el-input @keyup.enter.native="search" clearable="" @clear="search" v-model="loginLogVO.ip"
                    placeholder="请输入IP查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="search" type="primary">查询</el-button>
          <el-button @click="deleteLoginLogs(selected)" icon="el-icon-delete" :disabled="this.selected.length === 0">批量
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <template>
        <el-table
          border
          stripe
          :data="LoginLogData"
          style="width: 100%;"
          height="460"
          @selection-change="selectChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="id" label="#" width="60" align="center"></el-table-column>
          <el-table-column prop="username" label="登入用户" width="150"></el-table-column>
          <el-table-column prop="loginTime" label="登入时间" width="190"></el-table-column>
          <el-table-column prop="location" label="登入地点" width="250"></el-table-column>
          <el-table-column prop="ip" label="IP地址" width="140"></el-table-column>
          <el-table-column prop="userSystem" label="操作系统" width="150"></el-table-column>
          <el-table-column prop="userBrowser" label="浏览器" width="100"></el-table-column>
          <el-table-column label="操作" width="100px;" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row.id)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        style="margin-top:10px;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.current"
        :page-sizes="[7, 10, 15, 20]"
        :page-size="this.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </el-card>
  </div>
</template>

<script>
  import { findLoginLogPage, deleteLoginLogById, deleteLoginLogsByIds } from '../../../api/system/loginLogs'

  export default {
    data () {
      return {
        selected: [],//选中的值显示
        LoginLogData: [],
        size: 7,
        total: 100,//总共多少条数据
        current: 1,
        loginLogVO: {
          username: '',
          ip: '',
        }
      }
    },

    created () {
      this.getLoginLogList()
    },
    methods: {

      //批量删除登陆日志
      async deleteLoginLogs () {
        const ids = this.selected.map(item => item.id).join() //获取所有选中行的id组成的字符串，以逗号分隔
        const res = await this.$confirm(
          '此操作将永久批量删除登入日志, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        if (res === 'confirm') {
          const { data: res } = await deleteLoginLogsByIds(ids)
          if (res.code === 200) {
            this.$message.success('登入日志删除成功')
            this.getLoginLogList()
          }
        }
      },

      selectChange (sel) {
        this.selected = sel
      },
      //搜索
      search () {
        this.current = 1
        this.getLoginLogList()
      },

      //加载登入日志列表
      getLoginLogList () {
        findLoginLogPage(this.current, this.size, this.loginLogVO).then(res => {
          if (res) {
            this.total = res.data.data.total
            this.LoginLogData = res.data.data.records
          }
        })
      },
      //删除登入日志
      async del (id) {
        const res = await this.$confirm(
          '此操作将永久删除该登入日志, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        if (res === 'confirm') {
          const { data: res } = await deleteLoginLogById(id)
          if (res.code === 200) {
            this.$message.success('登入日志删除成功')
            this.getLoginLogList()
          }
        }
      },

      //当每页条数改变
      handleSizeChange (val) {
        this.size = val
        this.getLoginLogList()
      },

      //当前页码改变
      handleCurrentChange (val) {
        this.current = val
        this.getLoginLogList()
      },
    },
  }
</script>
